<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}">
</head>
<body >
<h3>下拉框示例</h3>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <form th:action="@{/hospital-info/showLimit}">
                    <div class="col-sm-2 text-center">
                        省
                    </div>
                    <div class="col-sm-2">
                        <select class="form-control" name="pId" id="Province">
                            <option></option>
                        </select>
                    </div>
                    <div class="col-sm-2 text-center">
                        市
                    </div>
                    <div class="col-sm-2">
                        <select class="form-control" name="cId" id="City">
                            <option></option>
                        </select>
                    </div>
                    <div class="col-sm-2 text-center">
                        <input type="submit" th:value="提交">
                    </div>
                </form>
            </div>
        </div>
        <div class="col-md-12">
            <div th:each="list:${pageInfo.list}">
                <p th:text="${list.getHospitalName()}"></p>
            </div>
            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    <li class="page-item"><a class="page-link" th:href="@{/hospital-info/show(pn=)}">首页</a></li>
                    <li class="page-item" th:if="${pageInfo.hasPreviousPage}">
                        <a class="page-link" th:href="@{/hospital-info/show(pn=${pageInfo.pageNum - 1})}">Previous</a>
                    </li>
                    <li th:each="pageNum:${pageInfo.navigatepageNums}">
                        <a th:if="${pageNum==pageInfo.pageNum}" class="page-link" th:href="@{#}" th:text="${pageNum}"></a>
                        <a th:if="${pageNum!=pageInfo.pageNum}" class="page-link" th:href="@{/hospital-info/show(pn=${pageNum})}" th:text="${pageNum}"></a>
                    </li>
                    <li class="page-item" th:if="${pageInfo.hasNextPage}">
                        <a class="page-link" th:href="@{/hospital-info/show(pn=${pageInfo.pageNum+1})}">Next</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" th:href="@{/hospital-info/show(pn=${pageInfo.pages})}">尾页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

</div>

<script th:src="@{/jquery/jquery-3.5.1.js}"></script>
<script th:inline="javascript">
    $(function(){
        ProvinceBind();

        $("#Province").change(function(){
            CityBind();
        })
    })
    function Bind(str){
        alert(("#Province").html());
        $("#ProviceBind").val(str);
    }
    function ProvinceBind(){
        $("#Province").html("");
        var str="<option></option>";
        /*$.get([[${#request.getContextPath()}]] + "/city-info/ajax/allProvinces", {}, function (resp) {
            if (resp.code < 0) {
                alert(resp.msg);
            } else {
                $.each(resp.data, function (i, item) {
                    str += "<option value=" + item.cityId + ">" + item.cityName + "</option>"
                })
                $("#Province").append(str)
            }
        }, "json");*/
        $.ajax({
            url:[[${#request.getContextPath()}]]+"/city-info/ajax/allProvinces",
            success:function(data){
                $.each(data.data,function(i,item){
                    str+="<option value="+item.cityId+">"+item.cityName+"</option>"
                })
                $("#Province").append(str)
            },
            error:function(){alert("Error");}
        })
    }

    function CityBind(){
        $("#City").html("");
        var options=$("#Province option:selected");
        var province=options.val();
        if(province==""){
            return;
        }
        $("City").html("");
        var str="<option> </option>";

        $.ajax({
            url:[[${#request.getContextPath()}]]+"/city-info/ajax/allCities",
            data:{"id":province},
            success:function(data){
                $.each(data.data,function(i,item){
                    str+="<option value="+item.cityId+"><a th:href='@{/}'>"+item.cityName+"</a></option>";
                })
                $("#City").append(str);
                $('#City').selectpicker('refresh');
                $('#City').selectpicker('render');
            },
            error:function(){alert("Error");}

        });
    }
</script>
</body>

</html>